<template>
  <div>
    <img src="../../../src/assets/img/login/bgimg.jpg" height="100%" width="100%" class="bgimg">
    <el-row class="headerTop">
      <el-col :span="5" :offset="3">
        <div class="grid-content bg-purple">
          <p class="headTitleText"><span>{{headTitleText}}</span><span id="time"></span></p>
        </div>
      </el-col>
    </el-row>
    <el-row class="userRegister">
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <el-row style="margin-left: 0px;margin-right: 0px;">
            <el-col :span="8" :offset="7">
              <el-form :model="registerForm" :rules="rules" ref="registerForm" label-width="100px"
                       class="demo-ruleForm">
                <el-form-item prop="accountNumber">
                  <el-row>
                    <el-col :span="6">
                      <div class="grid-content bg-purple">用户账号：</div>
                    </el-col>
                    <el-col :span="18">
                      <div class="grid-content bg-purple">
                        <el-input v-model="registerForm.accountNumber" placeholder="请输入手机号/邮箱" id="accountNumber">
                          <template slot="append">
                            <el-button v-on:click="addDomain()" id="img">获取验证码</el-button>
                          </template>
                        </el-input>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item prop="verifyCode" class="verifyCode" v-if='m===true'>
                  <el-row>
                    <el-col :span="6">
                      <div class="grid-content bg-purple">验证码：</div>
                    </el-col>
                    <el-col :span="10">
                      <div class="grid-content bg-purple">
                        <el-input v-model="registerForm.verifyCode" auto-complete="off" placeholder="请输入验证码">
                          <template slot="append">{{this.verifyCodeNumber}}</template>
                        </el-input>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item prop="pass" v-if='m===true'>
                  <el-row>
                    <el-col :span="6">
                      <div class="grid-content bg-purple"><span>密码:</span></div>
                    </el-col>
                    <el-col :span="18">
                      <div class="grid-content bg-purple-light">
                        <el-input type="password" v-model="registerForm.pass" auto-complete="off"
                                  placeholder="请输入密码"></el-input>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item prop="checkPass" v-if='m===true'>
                  <el-row>
                    <el-col :span="6">
                      <div class="grid-content bg-purple"><span>确认密码:</span></div>
                    </el-col>
                    <el-col :span="18">
                      <div class="grid-content bg-purple-light">
                        <el-input type="password" v-model="registerForm.checkPass" auto-complete="off"
                                  placeholder="请确认密码"></el-input>
                      </div>
                    </el-col>
                  </el-row>
                </el-form-item>
                <el-form-item class="btn">
                  <el-button type="primary" @click="submitForm()">修改密码</el-button>
                  <el-button @click="resetForm('registerForm')">重置</el-button>
                </el-form-item>
              </el-form>
            </el-col>
          </el-row>
        </div>
      </el-col>
    </el-row>
    <el-row class="copyright">
      <el-col :span="8" :offset="8">
        <div class="grid-content bg-purple-dark">
          <span>版权所有：绵阳市人才管理中心咨询电话：0816-1234567 技术支持：绵阳市人才管理中心 地址：四川省绵阳</span>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
  import { postDataToServer } from '../../../src/assets/js/post.js'

  export default {
    data () {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'))
        } else {
          if (this.registerForm.checkPass !== '') {
            this.$refs.registerForm.validateField('checkPass')
          }
          callback()
        }
      }
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'))
        } else if (value !== this.registerForm.pass) {
          callback(new Error('两次输入密码不一致!'))
        } else {
          callback()
        }
      }
      var validatePass3 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入手机号/邮箱'))
        } else if (value.indexOf('@') < 0) {
          if (value.length != 11) {
            callback(new Error('输入手机号码格式错误！'))
          } else {
            this.accountType = 0
          }
        } else {
          this.accountType = 1
        }
      }
      return {
        accountType: '',
        verifyCodeimg: '绑定账号',
        headTitleText: '中国国际人才市场国家科技城（绵阳）分市场',
        registerForm: {
          accountNumber: '',
          verifyCode: '',
          pass: '',
          checkPass: ''
        },
        m: false,
        verifyCodeNumber: '',
        rules: {
          accountNumber: [
            {validator: validatePass3, trigger: 'blur'}
          ],
          verifyCode: [
            {required: true, message: '请输入验证码', trigger: 'blur'},
          ],
          pass: [
            {validator: validatePass, trigger: 'blur'}
          ],
          checkPass: [
            {validator: validatePass2, trigger: 'blur'}
          ],
        }
      }
    },
    methods: {
      submitForm () {
        var jsSHA = require('jssha')
        var shaObj = new jsSHA('SHA-256', 'TEXT')
        shaObj.update(this.registerForm.pass)
        var hash = shaObj.getHash('HEX')
        var _this = this
        var userParam1 = new Object()
        userParam1.bind_account = _this.registerForm.accountNumber
        userParam1.user_password = hash
        userParam1.verifiy_code = _this.registerForm.verifyCode
        postDataToServer('PASSWORD_RESET', userParam1).then(function (data) {
          if (data.status == 0) {
            _this.open2()
            _this.registerForm = ''
            /*_this.$router.push({path:'/UserEntry'});*/
          } else if (data.status == 1) {
            alert('验证码超期' + data.status)
          } else if (data.status == 1) {
            alert('验证码非法' + data.status)
          } else if (data.status == 1) {
            alert('新密码不符合规范' + data.status)
          } else {
            alert('接口出错' + data.status)
          }
        })
      },
      resetForm (formName) {
        this.$refs[formName].resetFields()
      },
      addDomain () {
        var _this = this
        var userParam2 = new Object()
        userParam2.bind_account = this.registerForm.accountNumber
        userParam2.account_type = this.accountType,
          userParam2.verify_type = '3',
          postDataToServer('CAPCHA_GET', userParam2).then(function (data) {
            _this.verifyCodeNumber = data.data_list
            if (data.status == 0) {
              _this.m = true
            } else if (data.status == 1) {
              alert('输入绑定账户非法!')
            } else if (data.status == 2) {
              alert('发送验证码失败!')
            } else if (data.status == 3) {
              alert('发送验证码频繁!')
            } else if (data.status == 4) {
              alert('非法验证码申请!')
            } else {
              alert('接口出错:' + data.status)
            }
          })
      },
      open2 () {
        this.$message({
          type: 'success',
          message: '成功！'
        })
      }
    }
  }
</script>

<style scoped>
  body {
    margin: 0;
  }

  .headerTop {
    background-color: #105ab9;
    height: 3em;
    color: white;
    font-size: 10px;
  }

  .headTitleText {
    vertical-align: middle;
    display: table-cell;
    height: 3em;
  }

  .bgimg {
    position: absolute;
    top: 0;
    bottom: 0;
    filter: blur(0px);
  }

  .el-form-item__label {
    color: #ffffff;
  }

  .userRegister {
    padding-top: 10%;
    color: white;
  }

  .btn {
    text-align: center;
  }

  .copyright {
    margin-top: 10%;
  }

  .copyright span {
    position: fixed;
    bottom: 1%;
    left: 28%;
    font-size: 12px;
    color: white;
  }
</style>
